<template>
    <div>
        <van-nav-bar
            title="画布测试"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <p>画布</p>
        <canvas @click="canvasClick" id="canvasDom" width="500" height="500"></canvas>
        <div>
            <van-button type="primary">缩放</van-button>
        </div>
        <div  class="divClass">
            <div ref="oneTab" class="one" @click="tab('one')"></div>
            <div ref="twoTab" class="two" @click="tab('two')"></div>
        </div>
        
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            ctx:{},
            El:null,
            points:[], //存储坐标
            clickIndex:-1,
        }
    },
    created(){  

    },
    mounted(){
        this.init();
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1)
        },
        tab(type){
            console.log(type,this.$refs.oneTab)
            switch(type){
                case 'one':
                    this.clickIndex=0;
                    this.$refs.oneTab.style.clipPath='polygon(0 0, 80% 0, 100% 100%, 0% 100%)'
                    this.$refs.twoTab.style.clipPath='polygon(0 0, 100% 0, 100% 100%, 20% 100%)'
                    break;
                case 'two':
                    this.clickIndex=1;
                    this.$refs.oneTab.style.clipPath='polygon(0 0, 100% 0, 80% 100%, 0% 100%)'
                    this.$refs.twoTab.style.clipPath='polygon(20% 0, 100% 0, 100% 100%, 0 100%)'
                    break;
            }
        },
        init(){
            let q=document.querySelector("canvas");
            let ctx=q.getContext("2d");
            this.ctx=ctx;
            // 跟踪绘画状态
            ctx.lineJoin = 'round';
            ctx.lineCap = 'round';
            let points = []; //存储坐标点
            let gridSize=50;
            let canvasWidth=ctx.canvas.width;
            let canvasHeight=ctx.canvas.height;
            let row=Math.floor(canvasWidth/gridSize);
            let col = Math.floor(canvasWidth / gridSize);
            for(let i=0;i<row;i++)
            {
                ctx.beginPath();
                ctx.moveTo(0,i*gridSize-0.5);
                ctx.lineTo(canvasWidth,i*gridSize-0.5);
                ctx.strokeStyle="#ccc";
                ctx.stroke();
            }
            for(let i=0;i<col;i++)
            {
                ctx.beginPath();
                ctx.moveTo(i*gridSize-0.5,0);
                ctx.lineTo(i*gridSize-0.5,canvasHeight);
                ctx.strokeStyle="#ccc";
                ctx.stroke();
            }
        },
        canvasClick(e){
            console.log(e)
            draw(e.offsetX,e.offsetY)
        },
        draw(mousex,mousey){
            points.push({ x: mousex, y: mousey });
            draw文字();
            ctx.stroke();
            points.slice(0, 1);
        }

    }
}
</script>
<style lang="less" scoped>

    #canvasDom{
        border:1px solid red;
    }
    .divClass{
        width: 200px; 
        height:50px;
        position:relative;
        // display: flex;
        // justify-content: flex-start;
        // align-items: center;
        .one{
            width:100px;
            height:50px;
            -webkit-clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
            background:#333;
            position:absolute;
            top:0;
            left:0;
        }
        .two{
            width:100px;
            height:50px;
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
            background:#ddd;
            position:absolute;
            left:80px;
            top:0;
        }
        .active-one{
            -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
        }
        .active-two{
            -webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
        }
    }
</style>